<!-- 
 * 新增编辑字典及字典项右侧抽屉组件
 * @author: 
 * @since: 2022-05-12
 * index.vue
-->
<template>
  <div class="offsideDrawer">
    <el-drawer v-model="isShowDrawer" title="" :before-close="closedDrawer">
      <template #title>
        <div class="drawer-title">
          <div class="title-icon"></div>
          <div class="title-text">
            <span>{{ drawer.title }}</span>
          </div>
        </div>
      </template>
      <template #default>
        <el-form class="drawer-content" :model="form" :rules="rules" ref="validateform">
          <el-form-item label="字典名称：" prop="dictName">
            <el-input v-model="form.dictName" :rows="12" placeholder="请输入字典名称" :disabled="props.type == 'dictItem'" />
          </el-form-item>
          <el-form-item v-if="props.type == 'dict'" label="字典编号：" prop="keyId">
            <el-input v-model="form.keyId" placeholder="请输入字典编号 如：DICT_RESULT" />
          </el-form-item>
          <el-form-item v-if="props.type == 'dictItem'" label="字典项名称：" prop="keyName">
            <inputCustom :model="form.keyName" placeholder="请输入字典项名称" :maxLength="64" @inputEvent="inputRoleName"></inputCustom>
          </el-form-item>
          <el-form-item :label="props.type == 'dictItem' ? '字典项说明：' : '字典说明：'" prop="keyExplain">
            <el-input v-model="form.keyExplain" type="textarea" placeholder="请输入说明" :rows="12" />
          </el-form-item>
          <el-form-item label="是否启用：" :required="true" class="noRules isEnable">
            <el-radio-group v-model="form.valid">
              <el-radio :label="item.label" v-for="(item, index) in radioList" :key="index">{{ item.value }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button type="primary" size="mini" style="width: 100px" @click="save">提交</el-button>
          <el-button size="mini" style="width: 100px" @click="closedDrawer">取消</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script setup>
import { reactive, ref, defineProps, defineEmits, watch } from 'vue'
import { addDictItemApi, editDictItemApi, addDictApi, editDictApi } from '@/api/interface/dict.js'
import { successHandle } from '@/utils/common.js'

const props = defineProps({
  isShowDrawer: {//是否展开角色抽屉
    type: Boolean,
    default: false
  },
  dictData: {//字典数据
    type: Object,
    default: () => { }
  },
  dictItemData: {//字典项数据
    type: Object,
    default: () => { }
  },
  type: {//
    type: String,
    default: "dict"
  },
})
const emits = defineEmits(['close', 'refresh'])

const drawer = reactive({
  title: '新增'
})

//新增编辑 form
const form = reactive({
  dictType: '',//字典id
  keyId: '',//字典编号
  dictName: '',//字典名称
  keyName: '',//字典项名称
  keyExplain: '',//字典项说明
  valid: false,
  id: ''
})
//表单验证 
const rules = {
  dictName: [{ required: true, message: '必填项', trigger: 'blur' }],
  keyName: [{ required: true, message: '必填项', trigger: 'blur' }],
};

//字典项名称输入事件
const inputRoleName = (text) => {
  form.keyName = text
}

//是否启用列表
const radioList = reactive([
  {
    label: true,
    value: '是'
  },
  {
    label: false,
    value: '否'
  }
])

//表单元素
const validateform = ref(null);



//新增
const addDictItem = (params) => {
  let _api = props.type == 'dict' ? addDictApi : addDictItemApi;
  delete params.id
  if( props.type == 'dict' ){
    delete params.dictType
  }else{
    params['dictType'] = params['dictType'] || params.keyId
    delete params.keyId
  }
  _api(params).then(res => {
      successHandle(res);
      emits('refresh')
    })
}

//编辑
const editDictItem = (params) => {
  let _api = props.type == 'dict' ? editDictApi : editDictItemApi
  _api(params).then(res => {
    successHandle(res);
    emits('refresh')
  })
}

//保存
const save = () => {
  validateform.value.validate((valid) => {
    if (valid) {
      const params = {
        dictType: form.dictType, //字典编号
        keyId: form.keyId, // 字典编号
        id: form.id,
        keyExplain: form.keyExplain, // 字段说明
        keyName: props.type == 'dict' ? form.dictName : form.keyName,
        valid: form.valid
      }
      if ( ( props.dictItemData?.id && props.type == 'dictItem' ) || ( props.dictData?.id && props.type == 'dict' ) ) {//修改
        editDictItem(params)
        emits('close')

      }else {//新增
        addDictItem(params);
        emits('close')
      }
    } else {
      console.log('没通过验证');
    }
  });
}

//关闭抽屉 清空数据
const closedDrawer = () => {
  validateform.value.resetFields()
  emits('close')
  drawer.title = '新增'
}

//watch监听
watch(
  () => props.isShowDrawer, (val) => {
    if (val) {
      if ( (!props.dictData?.id && props.type == 'dict') || (!props.dictItemData?.id && props.type == 'dictItem') ) {//新增字典
        drawer.title = "新增"
        for (let key in form) {
          if (key === "valid") {
            form[key] = false
          } else {
            form[key] = ''
          }
        }
      }else {//编辑
        drawer.title = "编辑"
        for (let key in form) {
          if(props.dictItemData?.id){
            form[key] = props.dictItemData[key]
          }
          else if(props.dictData?.id){
            form[key] = props.dictData[key]
          }
        }
        form['dictName'] = props.dictData['keyName']
      }

      if ( !props.dictItemData?.id && props.type == 'dictItem' ) {//新增
        form.dictName = props.dictData.keyName
        form.dictType = props.dictData.keyId
      }
    }
  },
  
)
</script>

<style lang="scss" scoped>
.isEnable {
  display: flex;
  flex-direction: row !important;
}
</style>
